<template>
  <page-search
    :search-config="searchConfig"
    @queryClick="handleQueryClick"
    @resetClick="handleResetClick"
  />
  <page-content
    ref="contentRef"
    :content-config="contentConfig"
    @edit-click="handleEditClick"
    @new-click="handleNewClick"
  >
    <template #status="scope">
      <el-tag
        effect="plain"
        class="tag_status"
        @click="handleStatusClick(scope.row)"
        :type="scope.row[scope.prop] ? 'primary' : 'danger'"
        >{{ scope.row[scope.prop] ? '启用' : '禁用' }}</el-tag
      >
    </template>
    <template #gender="scope">
      <el-tag
        round
        effect="plain"
        :type="scope.row[scope.prop] == '1' ? 'danger' : 'primary'"
        v-if="!!scope.row[scope.prop]"
        >{{ scope.row[scope.prop] == '1' ? '女' : '男' }}</el-tag
      >
    </template>
    <template #departmentId="scope">
      <el-tag type="success" size="default" v-if="!!scope.row[scope.prop]">{{
        mapDepartmentName(scope.row[scope.prop])
      }}</el-tag>
    </template>
    <template #roleId="scope">
      <el-tag type="warning" size="default" v-if="!!scope.row[scope.prop]">{{
        mapRoleName(scope.row[scope.prop])
      }}</el-tag>
    </template>
  </page-content>
  <page-modal
    :modal-config="isNewRef ? modalNewConfig : userModalConfig"
    ref="modalRef"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import PageSearch from '@/components/page/search/index.vue'
import PageContent from '@/components/page/content/index.vue'
import PageModal from '@/components/page/modal/index.vue'
import {
  searchConfig,
  modalConfig,
  contentConfig,
  modalNewConfig
} from './config'
import { usePageModal, usePageContent } from '@/components/hooks/index'
import useMainStore from '@/store/main/main'
import useSystemStore from '@/store/main/system/system'
import type { IModalConfig } from '@/components/types'

defineOptions({
  // 组件名称
  name: 'User',
  // 继承透传，是否继承没在子组件声明的父组件的属性
  inheritAttrs: true
})

interface IOptions {
  label: string
  value: string | number
}

const isNewRef = ref<boolean>(true)
const { contentRef, handleQueryClick, handleResetClick } = usePageContent()
const { modalRef, handleEditClick, handleNewClick } = usePageModal(
  createcallback,
  editcallback
)

const { entireRoles, entireDepartments } = useMainStore()
const userModalConfig = ref<IModalConfig>({ ...modalConfig })

setUserConfig()
function setUserConfig() {
  const rolesOptions: IOptions[] = entireRoles.map((item) => {
    return {
      label: item.name,
      value: item._id
    }
  })
  const departmentsOptions: IOptions[] = entireDepartments.map((item) => {
    return {
      label: item.name,
      value: item._id
    }
  })
  modalConfig.propItems.forEach((item) => {
    if (item.type === 'select') {
      if (item.prop === 'roleId') {
        // console.log(rolesOptions)
        item.options = [...rolesOptions]
      }
      if (item.prop === 'departmentId') {
        item.options = [...departmentsOptions]
      }
    }
  })
  userModalConfig.value = modalConfig
}

function editcallback(item: any) {
  console.log({ ...item })
  isNewRef.value = false
}

function createcallback() {
  isNewRef.value = true
}

function mapDepartmentName(departmentId: string) {
  const department = entireDepartments.find((item) => item._id === departmentId)
  return department?.name || ''
}
function mapRoleName(roleId: string) {
  const role = entireRoles.find((item) => item._id === roleId)
  return role?.name || ''
}

const systemStore = useSystemStore()
const { pageName, category } = contentConfig
const page = `${category}/${pageName}`
/** 更改状态，禁用或启用  */
function handleStatusClick(row: any) {
  let { _id, status } = row
  const flag = !status
  // console.log(_id, flag)
  systemStore.updatePageAction(page, _id, { status: flag })
}
</script>

<style scoped lang="scss">
.tag_status {
  cursor: pointer;
}
</style>
